<template>
  <div class="information">
    <div class="img">
      <img src="../assets/img6.jpg" alt="">
      <div class="detail">
        <span>西式</span>
        <span>WSETERN-STYLE</span>
        <CustomButton content="more"/>
      </div>
      
    </div>
    <div class="img">
      <img src="../assets/img7.jpg" alt="">
      <div class="detail">
        <span>中式</span>
        <span>CHINESE-STYLE</span>
        <CustomButton content="more"/>
      </div>
    </div>
  </div>
</template>

<script>
import CustomButton from '../components/button.vue'
export default {
  components:{
    CustomButton
  }
}
</script>

<style lang="less" scope>
.information{
    display: flex;
    flex-direction: column;
    height: 100vh;
    padding: 2em 0;
    .img{
      font-size: 1.1em;
      line-height: 2.2em;
      height: 50%;
      position: relative;
      .detail{
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        text-align: center;
        display: flex;
        flex-direction: column;
      }
    }
    
}
</style>
